import { memo } from "react"
import { Link } from "react-router-dom"

const CommentItem = (props) => {
    const { comment, currentUser, slug,deleteComment } = props
    const showDelete = currentUser && comment && currentUser.username === comment.user.username
    return (
        <div className="card">

            {/* 评论内容 */}
            <div className="card-block">
                <p className="card-text">{comment.body}</p>
            </div>

            {/* 评论人信息 */}
            <div className="card-footer">
                <Link to={`/profile/${comment.user.username}`} className='comment-author'>
                    <img
                        className="comment-author-img"
                        src={comment.user.avatar || "https://yudafeng.github.io/static/default.png"}
                    />
                </Link>
                {"  "}
                <Link to={`/profile/${comment.user.username}`} className='comment-author'>
                    {comment.user.username}
                </Link>
                <span>
                    {new Date(comment.createdAt).toLocaleDateString()}
                </span>
                {/* 删除编辑 :登录用户=评论用户 */}
                {
                    showDelete ? <button className="mod-options"
                        onClick={()=>{
                            deleteComment(slug, comment.id)
                        }}
                    >删除</button> : null
                }

            </div>
        </div>
    )
}

export default memo(CommentItem)